<template>
    <div ref="container">
        <a-modal :title="title" :width="800" :visible="visible" :confirmLoading="confirmLoading"
            :getContainer="() => $refs.container" :maskStyle="{ top: '93px', left: '154px' }" :mask="isDesktop()"
            :maskClosable="false" @ok="handleOk" @cancel="handleCancel" cancelText="关闭" style="top: 5%; height: 85%">
            <template slot="footer">
                <a-button key="back" v-if="isReadOnly" @click="handleCancel"> 关闭 </a-button>
            </template>
            <a-spin :spinning="confirmLoading">
                <a-form-model :model="form" ref="ruleForm" :rules="rules" id="distributionModal">
                    <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="操作" prop="handle">
                        <a-radio-group v-model="form.handle">
                            <a-radio value="0">
                                全选
                            </a-radio>
                            <a-radio value="1">
                                全不选
                            </a-radio>
                        </a-radio-group>
                    </a-form-model-item>
                    <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="要求配送时间"
                        prop="mustDeliverTime">
                        <a-date-picker format="YYYY-MM-DD HH:mm:ss" v-model="form.mustDeliverTime" style="width: 100%;"
                            placeholder="请选择要求配送时间" :show-time="{ defaultValue: moment('00:00:00', 'HH:mm:ss') }" />
                    </a-form-model-item>
                    <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="配送员" prop="userIds">
                        <a-select placeholder="请选择配送员" v-model="form.userIds" mode="multiple" :maxTagCount="8"
                            :dropdownMatchSelectWidth="false">
                            <a-select-option v-for="(item, index) in userList" :key="index" :value="item.id">
                                {{ item.username }}
                            </a-select-option>
                        </a-select>
                    </a-form-model-item>
                </a-form-model>
            </a-spin>
        </a-modal>
    </div>
</template>
<script>
import pick from "lodash.pick";
import Vue from "vue";
import JSelectPosition from "@/components/jeecgbiz/JSelectPosition";
import JDate from "@/components/jeecg/JDate";
import { ACCESS_TOKEN } from "@/store/mutation-types";
import { getAction, postAction, putAction } from "@/api/manage";
import { autoJumpNextInput } from "@/utils/util";
import { mixinDevice } from "@/utils/mixin";
import JImageUpload from "../../../components/jeecg/JImageUpload";
import moment from "moment";

export default {
    name: "DistributionModal",
    mixins: [mixinDevice],
    components: {
        JImageUpload,
        JSelectPosition,
        JDate,
    },
    data() {
        return {
            title: "操作",
            visible: false,
            modalWidth: 800,
            drawerWidth: 700,
            orgaTree: [],
            departmentList: [],
            userList: [],
            roleList: [],
            userId: "", //保存用户id
            isReadOnly: false,
            disableSubmit: false,
            dateFormat: "YYYY-MM-DD",
            moment,
            rules: {
                userIds: [
                    {
                        required: true,
                        message: "请选择配送员!",
                        trigger: "change",
                    },
                ],
                mustDeliverTime: [
                    {
                        required: true,
                        message: "请选择配送时间!",
                        trigger: "change",
                    },
                ],
            },
            model: {},
            labelCol: {
                xs: { span: 24 },
                sm: { span: 4 },
            },
            wrapperCol: {
                xs: { span: 24 },
                sm: { span: 20 },
            },
            uploadLoading: false,
            confirmLoading: false,
            headers: {},
            form: {
                userIds: [],
                handle: "",
                mustDeliverTime: "",
            },
            isRoleIdHead: false,
        };
    },
    watch: {
        "form.handle": {
            handler: function (val, oldVal) {
                if (this.visible) {
                    if (val == "0") {
                        this.form.userIds = this.userList.map((item) => item.id);
                    } else {
                        this.form.userIds = [];
                    }
                }
            },
            immediate: true,
        },
    },
    created() {
        const token = Vue.ls.get(ACCESS_TOKEN);
        this.headers = { "X-Access-Token": token };
    },
    methods: {
        add(record) {
            this.edit({ ...this.form, ...record });
        },
        edit(record) {
            this.loadUserData();
            this.visible = true;
            this.model = Object.assign({}, record);
            let pickModel = pick(this.model, "mustDeliverTime");
            this.model.mustDeliverTime = moment(pickModel.mustDeliverTime ? pickModel.mustDeliverTime : new Date());
            this.form.mustDeliverTime = this.model.mustDeliverTime;

            this.$nextTick(() => {
                this.$refs.ruleForm.resetFields();
                autoJumpNextInput("distributionModal");
            });
        },
        close() {
            this.$emit("close");
            this.visible = false;
            this.disableSubmit = false;
        },
        handleOk() {
            const that = this;
            // 触发表单验证
            this.$refs.ruleForm.validate((valid) => {
                if (valid) {
                    that.confirmLoading = true;
                    let params = pick(this.model, "depotHeadIds");
                    params.deliverymanIds = this.form.userIds.map((item) => `[${item}]`).join("");
                    params.mustDeliverTime = this.form.mustDeliverTime.format("YYYY-MM-DD HH:mm:ss");

                    postAction("/depotHead/depotHeadAllocation", params)
                        .then((res) => {
                            if (res.code === 200) {
                                that.$emit("ok");
                                that.close();
                            } else {
                                that.$message.warning(res.data.message);
                            }
                        })
                        .finally(() => {
                            that.confirmLoading = false;
                        });
                }
            });
        },
        handleCancel() {
            this.close();
        },
        loadUserData() {
            let that = this;
            getAction("/user/queryUserListByRoleId", { roleId: 43 }).then((res) => {
                if (res.data.users) {
                    that.userList = res.data.users;
                }
            });
        },
    },
};
</script>

<style scoped></style>
